<template>
	<view class="container">
		<view class="storeInfo">
      <view class="follow-shop" @click="followShopHandle">
        <text>{{whetherToFollow ? '已关注': '关注店铺'}}</text>
      </view>
			<image :src="shopdetail.shopMoveBanner" class="storeImg"></image>
			<view class="storeTitle">
				{{shopdetail.shopName}}
			</view>
			<view class="rateInfo">
				<uniRate activeColor="#f7b804" :size="10" :disabled="true" :value='shopdetail.appraisesScore'></uniRate>
				<text class="commentCount">{{shopdetail.appraisesCount}}条评论</text>
				<view class="adres">
					{{shopdetail.shopCompany}}
				</view>
			</view>

			<view class="phoneInfo">
        <view class="pi"  @click="phonecall(shopdetail.shopTel)">
          <uniIcons type="phone-filled" size="18" color="#f07e11"></uniIcons>
          <view>
            {{shopdetail.shopTel}}
          </view>
        </view>

        <view class="share-pos" @click="shareHandle">
          <image  src="/static/icon/share.png"></image>
        </view>
			</view>
			<view class="addressInfo" @click="tomap">
				<uniIcons type="location-filled" size="18" color="#f07e11"></uniIcons>
				<view>
					<view class="normalText">
						{{shopdetail.shopAddress}}
					</view>
					<view class="normalText">
						营业时间：{{shopdetail.serviceStartTime}}-{{shopdetail.serviceEndTime}}
					</view>
				</view>
			</view>
			<view class="oprates" v-if="shopdetail.isPhysicalStore == 1">
				<view >
					<text class="take">订</text>
					<text class="normalText" @click="todetail">立即预定</text>
				</view>
			</view>
		</view>
		<view class="banner">
			<image class="image" v-show="shopdetail.giftBagIcon" @click="tolink('/district/giftPackage/giftPackage?shopId='+shopdetail.shopId)" :src="shopdetail.giftBagIcon"
			 mode=""></image>
			<image class="image" v-show="shopdetail.pintuanIcon" @click="tolink('/pages/groupbooking/groupbooking?shopId='+shopdetail.shopId)" :src="shopdetail.pintuanIcon"
			 mode=""></image>
		</view>
		<!-- 门店信息结束 -->
		<view class="recommandBox" v-if="shopdetail.isPhysicalStore == 1">
			<view class="recomTitle">
				<view class="title">
					商家推荐（{{appointmentGoodsList.length}}）
				</view>
				<view class="showMore" @click="tomore">
					查看更多
					<uniIcons type="forward" size="20" color="#f07e11"></uniIcons>
				</view>
			</view>
			<scroll-view scroll-x="true" class="stores">
				<view class="recommansCon">
					<block v-for="(item, index) in appointmentGoodsList" :key='index'>
						<view @click="toproduct(item)">
							<image :src="item.goodsImg" class="storePic" mode=""></image>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>

		<view class="giftList" v-if="shopdetail.isPhysicalStore == 1">
			<view class="freeBox">
				<view class="freeInner">
					<view class="freeTitle">免单总价值</view>
					<view class="freeText">{{shopdetail.freeTotalPrice}}元</view>
				</view>
			</view>

			<view class="giftItem" v-for="(item,index) in freeAppointmentGoodsList" :key="index">
				<image @click="toproduct(item)" :src="item.goodsImg" mode="" class="giftImg"></image>
				<view class="context">
					<view class="boldText">
						{{item.goodsName}}
					</view>
					<view class="desc">
						{{item.goodsTips}}
					</view>
				</view>
				<view :class="['sattusBox', !item.isBought?'useful':'unUseful']" style="text-align: center;">
					价值{{item.shopPrice}}
				</view>
			</view>
			<view class="oprate" v-if="freeAppointmentGoodsList.length">
				<view @click="todetail" class="buyBtn">
					立即抢购
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list" v-if="shopdetail.isPhysicalStore == 0">
			<view v-for="(item, index) in goodsList"  :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<view class="storeType">自营</view>
					<image :src="item.goodsImg" class="goodsPic" mode="aspectFill"></image>
				</view>
				<view class="goodContext">
					<view class="title ">{{item.goodsName}}</view>
					<view class="price-box">
						<text class="price">{{item.marketPrice}}</text>
						<text class='costScore'>{{item.startUs?'可兑换':'无积分兑换'}}</text>
					</view>
					<view class="saleLess">
						<view class="vipBox" v-if="item.shopVipPrice > 0">
							会员价<text class="vprice">{{item.shopVipPrice}}</text>
						</view>
						<view class="expreTitle">消费奖励：{{item.rebate_gg_credit | parseIntFilter}}</view>
						<view class="rang">
							让利值：{{item.rebatePv | parseIntFilter}}
						</view>
					</view>
				</view>
			</view>
		</view>

    <!-- 分享 -->
    <share-poster
        ref="share"
        :qrcodeVal="qrcodeVal"
        cover="/static/images/shop-share.png"
        :slogan="['1、保存图片到相册', '2、打开APP即可看见']"
    />
	</view>
</template>

<script>
  import siteInfo from "@/siteInfo.js"
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
  import sharePoster from "@/components/share-poster.vue"

  export default {
		components: {
			uniRate,
			uniIcons,
      sharePoster
		},
		data() {
			return {
				goodsList:[],
				shopdetail: {},
				shopId: '',
				appointmentGoodsList: [],
				freeAppointmentGoodsList: [{
					status: 1
				}, {
					status: 1
				}, {
					status: 1
				}, {
					status: 1
				}, {
					status: 0
				}, {
					status: 0
				}],

        whetherToFollow: false,
			};
		},
		onShow(){
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.loadshopdetail()
		},
		methods: {
		  // 关注店铺
       followShopHandle(){
        let that = this;
        let url ='';
        if (!!this.whetherToFollow){
          uni.showModal({
            title: '温馨提示',
            content: '确认是否取消关注！',
            success: function(res) {
              console.log(res);
              if (res.confirm) {
                that.followCore('/api/shop/unfavorite')
                console.log(url);
              } else{
                return ;
              }
            }
          })
        }else{
          that.followCore('/api/shop/favorite')
        }
      },
      followCore(url){
        let that = this;
        let data = {
          shopId: that.shopId
        }
        that.$Request.request(url, 'POST', data).then(res => {
          if (res.status == 1) {
            this.whetherToFollow = !this.whetherToFollow;
            uni.showToast({
              title: res.msg,
              duration: 2000
            });
          }
        }).catch(err => {
          console.log(err)
        })
      },
      shareHandle(){
        this.$refs.share.open();
      },
			navToDetailPage(item){
				uni.navigateTo({
					url:'/pages/product/product?id='+item.goodsId
				})
			},
			tomore() {
				uni.navigateTo({
					url: '/district/recommandStore/recommandStore?shopId=' + this.shopId
				})
			},
			tomap() {
				// #ifdef APP-PLUS
				// Map.openMap(this.shopdetail.latitud, this.shopdetail.longitude, this.shopdetail.shopAddress)
				uni.openLocation({
					latitude:this.shopdetail.latitude,
					longitude:this.shopdetail.longitude,
					name:this.shopdetail.shopAddress,
					address:this.shopdetail.shopAddress,
					success:function(res){ 
						
					}
				})
				// pathPlanning(this.shopdetail.shopAddress)
				// uni.navigateTo({
				// 	url: "/district/appointmentMap/appointmentMap?latitude=" + this.shopdetail.latitude + '&longitude=' + this.shopdetail
				// 		.longitude
				// })
				// #endif
				
				// #ifdef MP
				
				uni.openLocation({
					latitude:this.shopdetail.latitude,
					longitude:this.shopdetail.longitude,
					name:this.shopdetail.shopAddress,
					address:this.shopdetail.shopAddress,
					success:function(res){ 
						
					}
				})
				
				// let plugin = requirePlugin('chooseLocation');
				// let key = 'H7YBZ-X62CX-TB64J-7MIKJ-N7UNH-T4FWM';  //使用在腾讯位置服务申请的key
				// let referer = '呱呱盟';   //调用插件的app的名称
				// let endPoint = JSON.stringify({  //终点
				//   'name': this.shopdetail.shopAddress,
				//   'latitude': this.shopdetail.latitude,
				//   'longitude': this.shopdetail.longitude
				// });
				// wx.navigateTo({
				//   url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + 1
				// });
				// #endif
			},
			todetail() {
				uni.navigateTo({
					url: '/district/appointment/appointment?shopId=' + this.shopId
				})
			},
			tolink(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadshopdetail() {
				let that = this;
				let data = {
					shopId: that.shopId
				}
				that.$Request.request('/api/shop/shopDetail', 'GET', data).then(res => {
					if (res.status == 1) {
						that.freeAppointmentGoodsList = res.data.freeAppointmentGoodsList;
						that.shopdetail = res.data;
						that.appointmentGoodsList = res.data.appointmentGoodsList
						that.goodsList = res.data.normalGoodsList;
						that.whetherToFollow = res.data.is_favorite == 1 ? true : false;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toproduct(item) {
				if(item.isBought){
					this.$api.msg('已使用！')
					return false;
				}
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.goodsId+'&is_sq=1'
				})
			},
			phonecall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (result) => {},
					fail: (result) => {}
				})
			},
		},
    computed:{
      qrcodeVal(){
        return `${siteInfo.root}/static/app/index.html?v1&share=ymyx@sp@id`+this.shopId
      }
    }
	}
</script>

<style lang="scss">
	.banner {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 10px 0px;

		.image {
			width:406upx;
			height: 200upx;

			img {
				width: 50%;
				height: 50%;
			}
		}
	}
.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.storeType {
		background-color: #e12038;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		@include textVCenter(40rpx);
		transform: rotate(-45deg);
		left: -30rpx;
		z-index: 19;
		width: 100rpx;
		text-align: center;
	}

	.listItem {
		flex-direction: row !important;
		width: 98% !important;

		.image-wrapper {
			width: 35% !important;
			height: 230rpx !important;

		}

		.goodContext {
			width: 65% !important;
			padding-left: 20rpx;
		}
	}

	.goodContext {
		@extend %flexVerBetw;
		min-height: 230rpx;
	}

	.costScore {
		color: $themColor;
	}

	.goods-item {
		display: flex;
		flex-direction: column;
		padding: 30upx 0upx 0upx 10upx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 10px;
		width: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		position: relative;

		.goodsPic {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}

	.title {
		font-size: $uni-font-size-sm;
		color: $font-color-dark;
		line-height: 40upx;
		@include moreLine(2);
	}

	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10upx;
		padding-top: 18rpx;
		font-size: 24upx;
		color: $font-color-light;
	}

	.vipBox {
		background-color: $themLight;
		color: #fff;
		font-size: 20rpx;
		@include textCenter(40rpx);
		padding: 0 10rpx;
		border-radius: 20rpx;
		display: flex;

		.vprice {
			color: #fff;

			&:before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.saleLess {
		height: 50rpx;
		@extend %flexBetw;
		.expreTitle{
			color: #fa436a;
			font-size: 20upx;
		}
		.rang {
			font-size: 20rpx;
			color: $uni-color-primary;
		}
	}

	.score {
		height: 50rpx;
		line-height: 50rpx;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;



		.recharge {
			color: $uni-color-primary;

			&::before {
				content: '￥';
			}
		}
	}

	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;

		&:before {
			content: '￥';
			font-size: 26upx;
		}
	}
  .share-pos{
    float: right;
    image{
      width: 40upx; height: 40upx;
      margin-top: 10rpx;
    }
  }
  .phoneInfo{
    display: flex;
    justify-content: space-between;

    .pi{
      display: flex;
    }
  }
	@import './districtDetail.scss'
</style>
